<template>
    <div class="menu-list">
        <template v-for="(item, index) in props.data" :key="item.path+'-'+index">
            <el-sub-menu :index="item.path" v-if="item.children && item.children?.length" :title="item.title">
                <template #title>
                    <v-svg-icon :icon-name="item.icon" :color="item.iconColor" :style="props.svgStyle"></v-svg-icon>
                    <span slot="title" v-if="!props.isCollapse">{{ item.title }}</span>
                </template>
                <HMenuList :data="item.children" :isCollapse="props.isCollapse" :svg-style="props.svgStyle"></HMenuList>
            </el-sub-menu>
            <HMenuItem :data="item" v-else :isCollapse="props.isCollapse" :svg-style="props.svgStyle"></HMenuItem>
        </template>
    </div>
</template>

<script lang="ts" setup>
import VSvgIcon from "@/components/SvgIcon/VSvgIcon.vue";
import HMenuItem from "./HMenuItem.vue";
const props = defineProps<{
    data: any[]
    isCollapse: boolean
    svgStyle: any
}>()

</script>
